<template>
  <el-dialog
    class="public-dialog"
    title="合并订单"
    width="940"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
    :close-on-click-modal="false"
  >
    <div class="text-[14px] text-[#0a1431] leading-[20px] mb-[8px]">
      选择其中一个订单作为主单，合并之后的订单会使用主单的订单信息和收件信息
    </div>
    <div>
      <div
        v-for="item in rows"
        :key="item"
        class="flex items-center rounded-[8px] border-[1px] border-[#e9e9e9] px-[16px] py-[12px] text-[14px] text-[#3a4259] leading-[22px] overflow-hidden mb-[16px] last:mb-[0] cursor-pointer"
        @click="handleSelect(item)"
      >
        <div class="w-[50px] text-center">
          <el-radio class="c-radio" :label="item" :model-value="radio" />
        </div>
        <div class="w-[220px]">
          <p>{{item.platform_order_sn}}</p>
          <p>{{item.recipient?.recipient_name || '--'}}</p>
          <p>{{item.recipient?.recipient_email || '--'}}</p>
        </div>

        <div class="ml-[24px] w-[360px]" v-if="item.recipient">
          <p class="truncate" title="">
            {{item.recipient.recipient_country}}/{{item.recipient.recipient_city}}/{{item.recipient.recipient_region}}/{{item.recipient.recipient_province}}
          </p>
          <p class="truncate" title="">
            {{item.recipient.recipient_preferred_address || '-'}}
          </p>
        </div>
        <div class="ml-[24px] w-[360px]" v-else>
          <span style="color: red">接口无recipient字段返回</span>
        </div>

        <div class="ml-[24px] text-[#6C7283] w-[180px]">
          <p class="line-clamp-2" title="">
            {{item.buyer_remark}}
          </p>
        </div>
      </div>
    </div>
    <template #footer center>
      <!-- <div class="flex justify-center py-[10px]"> -->
        <el-button @click="handleClose(false)" :disabled="loading">
          取消
        </el-button>
        <el-button type="primary" @click="handleCombined" :loading="loading">
          重新合并
        </el-button>
      <!-- </div> -->
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from 'element-plus'
import api from '../../api'

const radio = ref(false)

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  rows: { type: Array, default: () => [] },
})

const emit = defineEmits(['update:modelValue', 'refresh'])

const loading = ref(false)

const handleCombined = async () => {
  try {
    loading.value = true
    if (!radio.value) {
      return ElMessage.warning('请选择主单')
    }
    const {id} = radio.value
    const dtd = {
      order_ids: [...new Set([id, ...props.rows.map(v => v.id)])],
      handler: 'order_merge'
    }
    await api.batchOperation(dtd)
    ElMessage.success('操作成功')
    handleClose(true)
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

const handleSelect = e => {
  radio.value = e
}

const handleClose = refresh => {
  emit('update:modelValue', false)
  if (refresh) emit('refresh')
}
</script>
<style lang="scss" scoped>
.c-radio {
  :deep(.el-radio__label) {
    display: none;
  }
}
</style>
